<template>
  <div class="snackbarLayout"
       :style="{height:(showTitleBat?getAdaptiveSize(46):0) + (showStatusLayout ? statusHeight:0)+'px'}">
    <div :class="{'van-nav-bar':true,'van-hairline--bottom':true,'van-nav-bar--fixed':fixed}">
      <div class="statusLayout" :style="{height:(showStatusLayout?statusHeight:0)+'px',backgroundColor:statusColor}"
           v-if="showStatusLayout"/>
      <div class="van-nav-bar__content" :style="{'background-color':backColor,'border':'1px solid '+backColor}"
           v-if="showTitleBat">
        <div class="van-nav-bar__left" v-show="showBack" @click="onClickLeft">
          <i v-if="leftText==null" class="van-icon van-icon-arrow-left van-nav-bar__arrow" :style="{color:styleColor}"><!----></i>
          <span class="van-nav-bar__text"></span>{{leftText}}</div>
        <div class="van-nav-bar__title van-ellipsis" :style="{color:styleColor}">{{title == null ?
          this.$route.name:title}}
        </div>
        <div class="van-nav-bar__right" @click="onClickRight" v-if="rightText!=null">
          <span class="van-nav-bar__text" :style="{'color':rightTextColor}">{{rightText}}</span>
          <span v-if="rightTexts!=null" class="van-nav-bar__texts" :style="{'color':rightTextColor}" style="margin-left: 10px" >{{rightTexts}}</span>
        </div>
      </div>
      <slot name="slot"/>
    </div>
  </div>
</template>

<script>

  import { finish, getWindowWidth, getStatusBarHeight, getUserAgent } from '@/utils/app'

  export default {
    name: 'Snackbar',
    props: {
      showStatusLayout: {
        type: Boolean,
        default: true
      },
      showTitleBat: {
        type: Boolean,
        default: true
      },
      fixed: {
        type: Boolean,
        default: false
      },
      statusColor: {
        type: String,
        default: '#0000'
      },
      backColor: {
        type: String,
        default: '#0000'
      },
      styleColor: {
        type: String,
        default: '#000'
      },
      title: {
        type: String,
        default: null
      },
      showBack: {
        type: Boolean,
        default: true
      },
      rightText: {
        type: String,
        default: null
      },
rightTexts: {
        type: String,
        default: null
      },leftText: {
        type: String,
        default: null
      },      rightTextColor: {
        type: String,
        default: '#000'
      }
    },
    data() {
      return {
        statusHeight: 0
      }
    },
    created() {
      this.initHeight()
    },
    methods: {
      initHeight() {
        let sh = getStatusBarHeight()
        let w = getWindowWidth()
        sh = parseInt(sh)
        w = parseInt(w)
        let userAgent = getUserAgent()
        if (userAgent == 'android' && window.android) {
          this.statusHeight = 350.0 / (w * 1.0) * sh
        } else if (userAgent == 'ios') {
          this.statusHeight = 0
        }
      },
      onClickRight() {
        if (this.rightText != null) {
          this.$emit('onMeunClick')
        }
      },
      onClickLeft() {
        this.$router.back()
        finish()
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import './index.scss';
</style>
